<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-08-20 16:17:46
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-12 15:23:02
 -->
<!-- 组件使用方法见readme -->

<template>
  <div class="body">
    <el-table :data="tableData" border empty-text="这里空空如也" :cell-style="cellStyle">
      <el-table-column
        v-for="(item) in title"
        :key="item.type"
        :prop="item.type"
        :label="item.value"
        :min-width="item.width"
        :fixed="item.fixed"
      >
        <template slot-scope="scope" >
          <el-tag
            v-if="item.vtype == 'tag'"
            :type="tag[scope.row[item.type]]"
            :color="tag[scope.row[item.type]]"
            disable-transitions>{{scope.row[item.type]}}</el-tag>
          <p v-html="scope.row[item.type]" v-else-if="item.vtype == 'html'"></p>
          <el-link v-else-if="item.vtype == 'link'" type="primary" :href="scope.row[item.type]" target="_blank">{{item.linklabel}}</el-link>
          <pre v-else-if="item.vtype == 'array'">{{scope.row[item.type].join('\n')}}</pre>
          <p v-else-if="item.vtype == 'time'">{{formatterTime(scope.row[item.type])}}</p>
          <p v-else>{{scope.row[item.type] === '' ? scope.row[item.defaultVal] : scope.row[item.type]}}</p>
        </template>
      </el-table-column>
      <el-table-column :label="ope_label" v-if="operate.length" fixed="right" :min-width="ope_length">
        <div slot-scope="scope">
          <div class="sell">
            <el-button
              v-for="(opitem, index) in operate"
              :key="opitem.key"
              @click="edit(index,scope, tableData)"
              type="text"
              :disabled="Boolean(opitem.can && scope.row.status)"
              size="small"
            >{{(opitem.change && scope.row.status) ? opitem.evalue : opitem.value}}</el-button>
          </div>
        </div>
      </el-table-column>
    </el-table>
    <div class="pagination" v-if="total > pageSize">
      <el-pagination
        background
        :current-page="pageNum"
        :page-size="pageSize"
        @prev-click="changePn"
        @next-click="changePn"
        @current-change="changePn"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { replaceQuery } from "@/utils";
import moment from 'moment'
export default {
  name: "List",
  props: {
    title: {
      type: Array,
      default: () => { return [] },
      required: true
    }, // 表头
    tableData: {
      type: Array,
      default: () => { return [] },
      required: true
    }, // 表单数据
    operate: {
      type: Array,
      default: () => { return [] }
    }, // 操作
    total: {
      type: Number,
      default: 0
    }, // 数据总数
    pageSize: {
      type: Number,
      default: 0
    },
    pageNum: {
      type: Number,
      default: 1
    },
    columnStyle: {
      type: Object,
      default: () => { return {} }
    },
    ope_length: {
      type: String,
    },
    ope_label: {
      type: String,
      default: '操作'
    },
    tag: {
      type: Object,
      default: () => {
        return {
          "未生效": "primary",
          "已生效": "success",
        }
      }
    },
  },
  data() {
    return {
    };
  },
  methods: {
    formatterTime(time) {
      return moment(time).format('YYYY-MM-DD HH:MM:ss')
    },
    // 单元格点击事件
    cellClick(row, column, cell, event) {
      this.$emit("cellClick", row, column, cell, event);
    },
    // 单元格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if(this.columnStyle.column && columnIndex === this.columnStyle.column){
        if(row[this.columnStyle['key']] === (this.columnStyle.value || "")){
          return this.columnStyle.rstyle;
        } else {
            return this.columnStyle.style;
        }
      }
    },
    edit(index, data) {
      this.$emit("changeOp", index, data);
    },
    /**
     * 页码点击事件
     */
    changePn(num) {
      var dd = this.$emit("changePn", num);
      this.addHrefQuery({
        pn: num
      })
    },
    /**
     * 上一页
     */
    prevPage(num) {
      this.pn = num
      this.$emit("prevPage", num);
      this.addHrefQuery({
        pn: num
      })
    },
    /**
     * 下一页
     */
    nextPage(num) {
      this.pn = num
      this.$emit("nextPage", num);
      this.addHrefQuery({
        pn: num
      })
    },
    // 添加搜索条件到query中，以便刷新时获取
    addHrefQuery (data) {
      if ((location.href.indexOf('pn') < 0)) {
        var preStr = (location.href.indexOf('?') < 0) ? '?pn=' : '&pn='
        history.replaceState({}, '', location.href + preStr + data.pn)
      } else {
        var replaceUrl = replaceQuery(location.href, 'pn', data.pn)
        history.replaceState({}, '', replaceUrl)
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less" scoped>
.body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  // .el-table {
  //   td {
  //     padding: 0 !important;
  //     // height: 40px;
  //   }
  // }

  p {
    padding: 0;
    margin: 0;
  }
}
.sell {
  /* width:  */
  display: flex;
  /* justify-content: flex-start; */
}
.el-button {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.pagination {
  padding: 20px 0;
  /* display: flex;
  justify-content: center; */
}
</style>

